
<template>
    <div class="picker-poup" :class="{'picker-poup-show':visible}">
        <div class="v-poup-picker">
            <div class="picker-toolbar">
                <span class="v-picker-action v-picker-cancel" @click="visible = false">{{ cancelText }}</span>
                <span class="v-picker-action v-picker-confirm" @click="confirm">{{ confirmText }}</span>
            </div>
            <slot></slot>
        </div>
    </div>
</template>
<script>
export default {
    name: 'poup',
    data () { return {visible: false}; },
    props: {
        cancelText: {
            type: String,
            default: '取消'
        },
        confirmText: {
            type: String,
            default: '确定'
        }
    },
    methods: {
        open () {
            this.visible = true;
        },
        close () {
            this.visible = false;
        },
        confirm () {
            this.visible = false;
            this.$emit('confirm');
        }
    }
};
</script>
<style>
.picker-poup-show.picker-poup {
    z-index: 999999;
    background-color: rgba(0, 0, 0, 0.5);
}
.picker-poup-show .v-poup-picker {
    transform: translate3d(0, 0, 0);
}
.picker-poup {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0);
    overflow: hidden;
    transition: background-color ease 360ms, z-index ease 360ms;
}
.v-poup-picker {
    width: 100%;
    position: absolute;
    bottom: 0;
    background-color: #fff;
    transition: transform ease 360ms;
    transform: translate3d(0, 100%, 0);
}
.v-picker-action {
    box-sizing: border-box;
    display: inline-block;
    width: 50%;
    text-align: center;
    line-height: 0.8rem;
    font-size: 0.32rem;
    color: #007aff;
}
.v-picker-cancel {
    float: left;
    text-align: left;
    padding-left: 0.3rem;
}
.v-picker-confirm {
    text-align: right;
    padding-right: 0.3rem;
}
.picker-toolbar {
    height: 0.88rem;
}
</style>
